*{
    margin:0;
    padding:0;
}


/*
    比拼算力：

                        相当于
    200张 bm1387 (芯片) =======> 30000gpu
    而
    1gpu =========> 好几十个cpu
*/


/*

reflow:
    改变窗口大小，会触发

    改变文字大小

    内容的改变，输入框输入文字

    激活伪类，如:hover

    操作class属性

    脚本操作DOM

    计算offsetWidth和offsetHeight

    设置style属性

    不要这样一个一个设置：
    .style.color
    .style.backgroundColor

    应该增加一个类样式一次设置完
    .class {

    }



repaint：
    如果只是改变某个元素的背景色、文字颜色、边框颜色，不影响它周围或内部布局的属性
    repaint 速度快于 reflow

*/


/*
css3性能优化老的做法：
    下面两个属性会导致浏览器新起一个层来处理，会提升性能
    opacity:  // 一般不使用这个属性来操作，而是会使用下面这个属性
    transform: ... translatez(0);


上面的做法是不专业的，后来给出了新的方法来实现gpu加速：
    div {
        // 兼容性很不好
        will-change: transform // 告诉浏览器这个元素将要使用transform进行复杂的变换
        但是浏览器这种机制也会消耗性能
    }

    比较好的做法：
    div:hover {
        will-change: transform;
    }
    div:active {
        transform: 
    }
*/
